<%@page contentType="text/html; charset=UTF-8" trimDirectiveWhitespaces="true" pageEncoding="UTF-8" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<style>
    .pagination {
        margin-top: 0px;
        display: block;
    }

    .pagination > .active > span, .pagination > .active > span:hover {
        background-color: #319BD9;
        border-color: #319BD9;
    }

    pagination {
        display: inline-block;
        padding-left: 0;
        margin: 20px 0;
        border-radius: 4px
    }

    .pagination > li {
        display: inline
    }

    .pagination > li > a, .pagination > li > span {
        /*position: relative;
        float: left;*/
        padding: 6px 12px;
        margin-left: -1px;
        line-height: 1.42857143;
        color: #337ab7;
        text-decoration: none;
        background-color: #fff;
        border: 1px solid #ddd
    }

    .pagination > li:first-child > a, .pagination > li:first-child > span {
        margin-left: 0;
        border-top-left-radius: 4px;
        border-bottom-left-radius: 4px
    }

    .pagination > li:last-child > a, .pagination > li:last-child > span {
        border-top-right-radius: 4px;
        border-bottom-right-radius: 4px
    }

    .pagination > li > a:focus, .pagination > li > a:hover, .pagination > li > span:focus, .pagination > li > span:hover {
        z-index: 3;
        color: #23527c;
        background-color: #eee;
        border-color: #ddd
    }

    .pagination > .active > a, .pagination > .active > a:focus, .pagination > .active > a:hover, .pagination > .active > span, .pagination > .active > span:focus, .pagination > .active > span:hover {
        z-index: 2;
        color: #fff;
        cursor: default;
        background-color: #337ab7;
        border-color: #337ab7
    }

    .pagination > .disabled > a, .pagination > .disabled > a:focus, .pagination > .disabled > a:hover, .pagination > .disabled > span, .pagination > .disabled > span:focus, .pagination > .disabled > span:hover {
        color: #777;
        cursor: not-allowed;
        background-color: #fff;
        border-color: #ddd
    }

    .pagination-lg > li > a, .pagination-lg > li > span {
        padding: 10px 16px;
        font-size: 18px;
        line-height: 1.3333333
    }

    .pagination-lg > li:first-child > a, .pagination-lg > li:first-child > span {
        border-top-left-radius: 6px;
        border-bottom-left-radius: 6px
    }

    .pagination-lg > li:last-child > a, .pagination-lg > li:last-child > span {
        border-top-right-radius: 6px;
        border-bottom-right-radius: 6px
    }

    .pagination-sm > li > a, .pagination-sm > li > span {
        padding: 5px 10px;
        font-size: 12px;
        line-height: 1.5
    }

    .pagination-sm > li:first-child > a, .pagination-sm > li:first-child > span {
        border-top-left-radius: 3px;
        border-bottom-left-radius: 3px
    }

    .pagination-sm > li:last-child > a, .pagination-sm > li:last-child > span {
        border-top-right-radius: 3px;
        border-bottom-right-radius: 3px
    }
</style>
<script>
    function page(i){
        var u = window.location.href;
        window.location.href = updateQueryStringParameter(u, "pageNum", i);
    }

    function updateQueryStringParameter(uri, key, value) {
        if(!value) {
            return uri;
        }
        var re = new RegExp("([?&])" + key + "=.*?(&|$)", "i");
        var separator = uri.indexOf('?') !== -1 ? "&" : "?";
        if (uri.match(re)) {
            return uri.replace(re, '$1' + key + "=" + value + '$2');
        }
        else {
            return uri + separator + key + "=" + value;
        }
    }
</script>
<c:if test="${page.total > 0}">
    <input type="hidden" name="page.num" value="${page.pageNum}"/>
    <input type="hidden" name="page.per" value="${page.pageSize}"/>
    <c:set var="size" value="5"/>
    <ul class="pagination">
        <c:choose>
            <c:when test="${page.pageNum == 1}">
                <li class="disabled"><span>&laquo;</span></li>
            </c:when>
            <c:otherwise>
                <%--<li><a href="?pageNum=${page.pageNum - 1}">&laquo;</a></li>--%>
                <li><a href="#" onclick="page(${page.pageNum - 1})">&laquo;</a></li>
            </c:otherwise>
        </c:choose>
        <c:choose>
            <c:when test="${page.pages <= size * 2}">
                <c:forEach var="i" begin="1" end="${page.pages}" step="1">
                    <c:choose>
                        <c:when test="${i == page.pageNum}">
                            <li class="active"><span>${i}</span></li>
                        </c:when>
                        <c:otherwise>
                            <%--<li><a href="?pageNum=${i}">${i}</a></li>--%>
                            <li><a href="#" onclick="page(${i})">${i}</a></li>
                        </c:otherwise>
                    </c:choose>
                </c:forEach>
            </c:when>
            <c:otherwise>
                <c:choose>
                    <c:when test="${page.pageNum <= size}">
                        <c:forEach var="i" begin="1" end="10" step="1">
                            <c:choose>
                                <c:when test="${i == page.pageNum}">
                                    <li class="active"><span>${i}</span></li>
                                </c:when>
                                <c:otherwise>
                                    <%--<li><a href="?pageNum=${i}">${i}</a></li>--%>
                                    <li><a href="#" onclick="page(${i})">${i}</a></li>
                                </c:otherwise>
                            </c:choose>
                        </c:forEach>
                        <li><span>...</span></li>
                        <%--<li><a href="?pageNum=${page.pages}">${page.pages}</a></li>--%>
                        <li><a href="#" onclick="page(${page.pages})">${page.pages}</a></li>
                    </c:when>
                    <c:when test="${page.pages - page.pageNum <= size}">
                        <%--<li><a href="?pageNum=1">1</a></li>--%>
                        <li><a href="#" onclick="page(1)">1</a></li>
                        <li><span>...</span></li>
                        <c:forEach var="i" begin="${page.pages - size * 2 + 1}" end="${page.pages}" step="1">
                            <c:choose>
                                <c:when test="${i == page.pageNum}">
                                    <li class="active"><span>${i}</span></li>
                                </c:when>
                                <c:otherwise>
                                    <%--<li><a href="?pageNum=${i}">${i}</a></li>--%>
                                    <li><a href="#" onclick="page(${i})">${i}</a></li>
                                </c:otherwise>
                            </c:choose>
                        </c:forEach>
                    </c:when>
                    <c:otherwise>
                        <%--<li><a href="?pageNum=1">1</a></li>--%>
                        <li><a href="#" onclick="page(1)">1</a></li>
                        <li><span>...</span></li>
                        <c:forEach var="i" begin="${page.pageNum - size + 1}" end="${page.pageNum + size}" step="1">
                            <c:choose>
                                <c:when test="${i == page.pageNum}">
                                    <li class="active"><span>${i}</span></li>
                                </c:when>
                                <c:otherwise>
                                    <%--<li><a href="?pageNum=${i}">${i}</a></li>--%>
                                    <li><a href="#" onclick="page(${i})">${i}</a></li>
                                </c:otherwise>
                            </c:choose>
                        </c:forEach>
                        <li><span>...</span></li>
                        <%--<li><a href="?pageNum=${page.pages}">${page.pages}</a></li>--%>
                        <li><a href="#" onclick="page(${page.pages})">${page.pages}</a></li>
                    </c:otherwise>
                </c:choose>
            </c:otherwise>
        </c:choose>
        <c:choose>
            <c:when test="${page.pageNum >= page.pages}">
                <li class="disabled"><span>&raquo;</span></li>
            </c:when>
            <c:otherwise>
                <%--<li><a href="?pageNum=${page.pageNum + 1}">&raquo;</a></li>--%>
                <li><a href="#" onclick="page(${page.pageNum + 1})">&raquo;</a></li>
            </c:otherwise>
        </c:choose>
        <li><span>共${page.total}条记录</span></li>
    </ul>
</c:if>